.Circle{
    height: calc(100vh - 50px);
    overflow-y: auto;
    .c_top{
        height: 64px;
        background-color: #09AFFF;
        color: white;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        .iconfont{
            font-weight: bold;
        }
        img{
            width: 32px;
            height: 32px;
            border-radius: 100%;
            border: 1px solid white;
            margin-left: 60px;
        }
    }
    .c_Color{
        margin-top: -1px;
        height: 150px;
        background-image: linear-gradient(#09AFFF,#FAFAFA);
        .flex{
            display: flex;
            justify-content: center;
        }
        .title{
            font-size: 14px;
            margin-top: 40px;
            margin-left: 15px;
            font-weight: bold;
        }
        @keyframes G {
            0%{
                transform: rotateX(-100deg);
            }
            50%{
                transform: rotateX(-50deg);
            }
            100%{
                transform: rotateX(0deg);
            }
        }
        .cont{
            animation: G 1s linear 1;
            width: 347px;
            height: 90px;
            background-color: white;
            border-radius: 10px;
            display: flex;
            align-items: center;
            img{
                width: 50px;
                height: 50px;
                border-radius: 100%;
            }
            p{
                margin-left: 15px;
                font-size: 13px;
            }
            div{
                margin-right: 25px;
                p:nth-child(1){
                    margin-bottom: 10px;
                    font-size: 14px;
                }
            }
            button{
                width: 80px;
                height: 32px;
                border: none;
                background-color: #09AFFF;
                color: white;
                border-radius: 20px;
            }
        }
    }
    .list{
        background-color: #FAFAFA;
        overflow: hidden;
        @keyframes A {
            0%{
                opacity: 0;
            }
            50%{
                opacity: 0.5;
            }
            100%{
                opacity: 1;
            }
        }
        .con:nth-child(4){
            height: 300px;
            .img{
                height: 190px;
            }
        }
        .con:nth-child(5){
            margin-top: -20px;
        }
        .con{
            animation: A 1s linear 1;
            .Jj{
                padding-left: 5px;
            }
            float: left;
            width: 168px;
            height: 267px;
            background-color: white;
            box-shadow: 1px 0px 10px 0px gainsboro;
            margin-left: 14px;
            margin-top: 10px;
            margin-bottom: 10px;
            border-radius: 10px;
            font-size: 14px;
            font-weight: bold;
            position: relative;
            .img{
                width: 168px;
                height: 168px;
                border-radius: 10px 10px 0 0;
            }
            .img1{
                width: 28px;
                height: 28px;
                border-radius: 100%;
            }
            .item{
                position: absolute;
                bottom: 5px;
                left:5px;
                display: flex;
                height: 40px;
                align-items: center;
                font-size: 13px;
                p{
                    display: flex;
                    align-items: center;
                    img{
                        margin-right: 10px;
                    }
                }
                p:nth-child(1){
                    margin-right: 30px;
                }
                .iconfont{
                    font-size: 13px;
                }
            }
        }
    }
    .no{
        height: 70px;
        font-size: 13px;
        color: gray;
        text-align: center;
        line-height: 70px;
        background-color: #FAFAFA;
    }
}